<template>
  <div>
    <el-card class="box-card card-main">
      <div class="split-parent">
        <div id="one">
          <div class="split-parent2" style="display: flex">
            <div id="split_one">
              折叠将索引处的元素大小更改为其最小值。除最后一个元素外，所有元素都朝前（左或上）折叠。最后一个朝后折叠。IE8不支持<br/>
            </div>
            <div id="split_two">

            </div>
          </div>
        </div>
        <div id="two">
          <div class="split-parent2" style="display: flex">
            <div id="split_three">

            </div>
            <div id="split_four">

            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import Split from 'split.js'

export default {
  name: 'split',
  data () {
    return {
      split: null,
      split2: null,
      split3: null,
      sizes: [],
      sizes2: [],
      sizes3: [],
      hidden: false
    }
  },
  components: {},
  methods: {
    clickHandler () {
      if (!this.hidden) {
        this.split2.setSizes()
        this.split.setSizes()
      } else {
        this.split2.setSizes([50, 50])
        this.split.setSizes([50, 50])
      }
      this.hidden = !this.hidden
      // console.log(this.split2.getSizes());
      // this.split2.setSizes([100,0])
      // this.split.setSizes()
      // console.log(this.split2.getSizes());
      // debugger
    }
  },
  mounted () {
    this.split = Split(['#one', '#two'], {
      sizes: [50, 50],
      minSize: [200, 200],
      expandToMin: true,
      // gutterSize: 12,
      gutterAlign: 'center',
      direction: 'vertical',
      cursor: 'row-resize'
    })
    this.split2 = Split(['#split_one', '#split_two'], {
      sizes: [50, 50],
      minSize: [300, 300],
      expandToMin: true,
      // gutterSize: 12,
      gutterAlign: 'center',
      // direction: 'vertical',
      cursor: 'row-resize'
    })
    this.split3 = Split(['#split_three', '#split_four'], {
      sizes: [50, 50],
      minSize: [300, 300],
      expandToMin: true,
      // gutterSize: 12,
      gutterAlign: 'center',
      // direction: 'vertical',
      cursor: 'row-resize'
    })

    // let size = split2.getSize();
    // debugger
  }
}
</script>
<style lang="scss" scoped>
  .card-main {
    height: 100%;
    border: 0;
  }

  .split-parent:after {
    content: "";
    display: table;
    clear: both;
  }

  .split-parent {
    width: 100%;
    /*height: calc(100% - 40px);*/
    height: 100%;
    /*border: 1px solid #348EED;*/
    #one1 {
      /*background: burlywood;*/
    }
    #two {
      /*background: lightgreen;*/
    }
  }

  .split-parent2 {
    width: 100%;
    height: 100%;
    #split_one {
      background: burlywood;
    }
    #split_two {
      background: red;
    }
    #split_three {
      background: green;
    }
    #split_four {
      background: yellow;
    }
  }

</style>
<style lang="scss">
  /*.split, .gutter.gutter-horizontal {
    float: left;
  }*/
  .card-main .gutter.gutter-horizontal {
    cursor: ew-resize;
  }

  .card-main .gutter.gutter-vertical {
    cursor: ns-resize;
  }

  .card-main {
    & > .el-card__body {
      height: 100%;
      padding: 0;
    }
  }
</style>
